import React, {useState} from 'react';
import {
  Dimensions,
  StyleSheet,
  Text,
  TextInput,
  ToastAndroid,
  View,
} from 'react-native';
import {Select} from 'teaset';
import LinearGradient from 'react-native-linear-gradient';
import {TouchableHighlight} from 'react-native-gesture-handler';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Row from '../components/Row';
import {post} from '../http/http';

const WIN_WIDTH = Dimensions.get('window').width;

export default function CabinetRepairPage({navigation, route}) {
  const [faultTypeList, setFaultTypeList] = useState([
    {faultTypeName: '柜门打不开'},
  ]);
  const [faultType, setFaultType] = useState(null);
  const [faultMessage, setFaultMessage] = useState('');

  const submitFault = async () => {
    try {
      await post(
        '/assets/materialCabinetApi/api/saveMaterialCabinetRepairApi?route=assets',
        {
          repairType: 0,
          materialCabinetId: route.params.materialCabinetId,
          repairContent: faultMessage,
        },
      );
      ToastAndroid.show('提交成功', ToastAndroid.SHORT);
      navigation.goBack();
      // Assuming pop() is a navigation function, which needs to be replaced with the appropriate navigation action
      // navigation.navigate('SomeRoute'); // Example navigation action
    } catch (error: any) {
      ToastAndroid.show(error.message, ToastAndroid.SHORT);
    }
  };

  return (
    <View style={{flex: 1, width: '100%', alignItems: 'center'}}>
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'transparent',
        }}>
        <Row style={{justifyContent: 'center'}}>
          <Text style={{fontSize: 30, color: '#63DA9B', marginRight: 30}}>
            故障类型:
          </Text>
          <Select
            iconTintColor={'#44BC86'}
            valueStyle={styles.selectValueStyle}
            style={styles.selectStyle}
            onSelected={(item, index) => {
              setFaultType(faultTypeList[index]);
            }}
            value={faultType}
            icon={
              <View style={{width: 40}}>
                <Ionicons name={'chevron-down'} size={30} color={'#44BC86'} />
              </View>
            }
            pickerType={'popover'}
            items={faultTypeList}
            popoverStyle={{width: WIN_WIDTH / 2, maxWidth: WIN_WIDTH / 2}}
            getItemValue={(item, index) => item}
            getItemText={(item, index) => {
              return (
                <View
                  style={{
                    backgroundColor:
                      faultType && faultType === item
                        ? '#46BE88'
                        : 'transparent',
                    width: WIN_WIDTH / 2 - 60,
                    paddingHorizontal: 0,
                    paddingVertical: 10,
                  }}>
                  <Text
                    style={{
                      color: faultType && faultType === item ? 'white' : '#333',
                      fontSize: 20,
                    }}>
                    {item.faultTypeName}
                  </Text>
                </View>
              );
            }}
          />
        </Row>
        <Row
          style={{
            alignItems: 'flex-start',
            justifyContent: 'center',
            marginTop: 40,
          }}>
          <Text style={{fontSize: 30, color: '#63DA9B', marginRight: 30}}>
            故障描述:
          </Text>
          <TextInput
            style={styles.inputStyle}
            value={faultMessage}
            onChangeText={setFaultMessage}
          />
        </Row>

        <View style={{marginTop: 100}}>
          <TouchableHighlight onPress={submitFault}>
            <LinearGradient
              colors={['#30CF9C', '#1AA6F6']}
              start={{x: 0, y: 0}}
              end={{x: 1, y: 0}}
              style={styles.linearGradient}>
              <Text style={styles.buttonText}>提交</Text>
            </LinearGradient>
          </TouchableHighlight>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  selectStyle: {
    width: WIN_WIDTH / 2,
    borderColor: '#46BE88',
    backgroundColor: '#112E32',
    height: 70,
  },
  selectValueStyle: {
    color: 'white',
    fontSize: 24,
  },
  inputStyle: {
    width: WIN_WIDTH / 2,
    borderColor: '#46BE88',
    borderWidth: 3,
    backgroundColor: '#112E32',
    height: 120,
    borderRadius: 8,
    textAlignVertical: 'top',
    padding: 30,
    color: 'white',
  },
  linearGradient: {
    paddingLeft: 30,
    paddingRight: 30,
    borderRadius: 44,
    height: 60,
    width: WIN_WIDTH * 0.5,
  },
  buttonText: {
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});
